<template>
    <div style="height:100%">
        <!-- 柱状图 -->
        <div ref="chartDom" class="com-chart"></div>
        <ItemSyncDetail
            :show="detailShow"
            v-if="detailShow"
            :info="{
                ...info,
                ...currentData,
            }"
            :syncExtraParams="{
                barIndex: currentData.barIndex,
                syncStatus: [currentData.seriesIndex],
            }"
            :riskEntryTypeObj="riskEntryTypeObj"
            @item-sync-detail="itemSyncDetailHandle"
            @getDetailDataChange="getDetailDataChange"
        ></ItemSyncDetail>
    </div>
</template>

<script lang="ts">
import { Vue, Component, Watch, Prop } from 'vue-property-decorator';
import * as echarts from 'echarts';
import ItemSyncDetail from './item-sync-detail.vue';

@Component({
    name: 'Item3DBar',
    components: {
        ItemSyncDetail,
    },
})
export default class Item3DBar extends Vue {
    @Prop() data: any;
    @Prop() info: any;
    @Prop() riskEntryTypeObj: any;
    chartInstance: any = null;

    detailShow: boolean = false;
    currentData: any = {};

    data1: any[] = [700, 800, 700, 600, 800, 700];
    data2: any[] = [600, 400, 350, 400, 400, 350];

    colorArr2 = ['rgba(189, 77, 81)', 'rgba(227, 105, 105)', 'rgba(240, 152, 149)'];
    colorArr = ['rgb(11, 117, 217)', 'rgba(26, 151, 255)', 'rgb(66, 176, 255)'];

    color = {
        type: 'linear',
        x: 0,
        x2: 1,
        y: 0,
        y2: 0,
        colorStops: [
            {
                offset: 0,
                color: this.colorArr[0],
            },
            {
                offset: 0.5,
                color: this.colorArr[0],
            },
            {
                offset: 0.5,
                color: this.colorArr[1],
            },
            {
                offset: 1,
                color: this.colorArr[1],
            },
        ],
    };
    color2 = {
        type: 'linear',
        x: 0,
        x2: 1,
        y: 0,
        y2: 0,
        colorStops: [
            {
                offset: 0,
                color: this.colorArr2[0],
            },
            {
                offset: 0.5,
                color: this.colorArr2[0],
            },
            {
                offset: 0.5,
                color: this.colorArr2[1],
            },
            {
                offset: 1,
                color: this.colorArr2[1],
            },
        ],
    };
    barWidth: number = 45;

    @Watch('data', { immediate: true, deep: true })
    onWatchData(newData) {
        if (newData) {
            let that = this;
            this.$nextTick(() => {
                that.updateChart();
            });
        }
    }

    handleClickBar(seriesName: string, data: string, percent: string, seriesIndex: number, xValue: number, name: string) {
        this.currentData = {
            seriesName: seriesName == '同步成功' ? '成功' : '失败',
            percent: percent,
            data: data,
            seriesIndex: seriesName == '同步成功' ? 1 : 0, // 注意:页面对应0是成功;但是实际1才是成功
            barIndex: xValue,
            xname: name,
        };
        console.log(seriesName, this.currentData.seriesIndex, 'seriesIndex------');

        this.detailShow = true;
    }

    // 同步明细回调
    itemSyncDetailHandle() {
        this.detailShow = false;
    }

    mounted() {
        window.handleClickBar = this.handleClickBar;
        this.initChart();
        // this.updateChart();
    }

    initChart() {
        this.chartInstance = echarts.init(this.$refs.chartDom);
        const data = [700, 800, 700, 600, 800, 700];
        const data2 = [600, 400, 350, 400, 400, 350];
        // const colorArr2 = ["rgba(11, 83, 128)", "rgba(2, 143, 224)", "rgba(11, 83, 128)"];
        // const colorArr = ["rgb(12, 109, 122)", "rgba(1, 241, 228)", "rgb(12, 109, 122)"];

        const colorArr2 = ['rgba(189, 77, 81)', 'rgba(227, 105, 105)', 'rgba(240, 152, 149)'];
        const colorArr = ['rgb(11, 117, 217)', 'rgba(26, 151, 255)', 'rgb(66, 176, 255)'];
        let color = {
            type: 'linear',
            x: 0,
            x2: 1,
            y: 0,
            y2: 0,
            colorStops: [
                {
                    offset: 0,
                    color: colorArr[0],
                },
                {
                    offset: 0.5,
                    color: colorArr[0],
                },
                {
                    offset: 0.5,
                    color: colorArr[1],
                },
                {
                    offset: 1,
                    color: colorArr[1],
                },
            ],
        };
        let color2 = {
            type: 'linear',
            x: 0,
            x2: 1,
            y: 0,
            y2: 0,
            colorStops: [
                {
                    offset: 0,
                    color: colorArr2[0],
                },
                {
                    offset: 0.5,
                    color: colorArr2[0],
                },
                {
                    offset: 0.5,
                    color: colorArr2[1],
                },
                {
                    offset: 1,
                    color: colorArr2[1],
                },
            ],
        };
        let barWidth = 45;
        let initOption = {
            backgroundColor: 'rgba(255,255,255, 0)',
            tooltip: {
                trigger: 'axis',
                formatter: function(params) {
                    let str = params[0].name + ':';
                    params.filter(function(item) {
                        if (item.componentSubType == 'bar') {
                            str += '<br/>' + item.seriesName + '：' + item.value;
                        }
                    });
                    return str;
                },
            },
            // 图表大小位置限制
            // grid: {
            //     // x: '10%',
            //     // x2: '5%',
            //     // y: '15%',
            //     // y2: '15%',
            // },
            grid: {
                left: '5%',
                right: '5%',
                top: '25%',
                bottom: '5%',
                containLabel: true,
            },
            legend: {
                show: true,
                icon: 'rect',
                // icon: 'path://M0,0L12,0L12,12L0,12Z',
                // right: 30,
                top: 20,
                itemGap: 30,
                itemWidth: 16,
                itemHeight: 16,
                selectedMode: false,
                data: ['同步成功', '同步失败'],
                textStyle: {
                    fontSize: 16,
                    color: '#b9bdc7',
                },
            },

            xAxis: {
                // data: ['1月', '2月', '3月', '4月', '5月', '6月'],
                // data: this.data['tags'],
                data: [],
                type: 'category',
                axisLabel: {
                    textStyle: {
                        color: '#b3b7c2',
                        fontWeight: 500,
                        fontSize: '14',
                    },
                },
                axisTick: {
                    textStyle: {
                        color: '#fff',
                        fontSize: '16',
                    },
                    show: false,
                },
                axisLine: {
                    // 坐标轴轴线相关设置。数学上的x轴
                    show: true,
                    lineStyle: {
                        // type: 'dashed',//线的类型 虚线
                        color: '#586a81',
                    },
                    // show: true,
                    // lineStyle: {
                    //     width: 1,
                    //     color: '#214776',
                    // },
                    textStyle: {
                        color: '#fff',
                        fontSize: '10',
                    },
                },
            },
            yAxis: {
                // min: 0,//最小
                // max: 3500,//最大
                // interval: 500,//相差
                min: () => {
                    // 获取y轴的刻度区间大小
                    // console.log(this.chartInstance.getModel().getComponent('yAxis').axis.scale._interval);
                    let interval = this.chartInstance.getModel().getComponent('yAxis').axis.scale._interval;
                    return interval;
                },
                type: 'value',
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#34465d',
                        // type: 'dashed',//线的类型 虚线0
                        // opacity: 0.2, // 透明度
                    },
                },
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: false,
                },
                // 坐标值标注
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#b3b7c2',
                    },
                },
                boundaryGap: true,
            },
            series: [
                // 这个实际不显示，被其他覆盖，用于设置图例颜色
                {
                    z: 0,
                    name: '同步成功',
                    type: 'pictorialBar',
                    // data: this.data['succeed'],
                    data: [],
                    symbol: 'diamond',
                    symbolOffset: ['-55%', '50%'],
                    symbolSize: [barWidth, 10],
                    itemStyle: {
                        normal: {
                            color: '#1b9fff',
                        },
                    },
                    tooltip: {
                        show: false,
                    },
                },
                // 中
                {
                    z: 1,
                    name: '同步成功',
                    type: 'bar',
                    barWidth: barWidth,
                    barMinHeight: 1,
                    barGap: '0%',
                    // data: data,
                    // data: this.data['succeed'],
                    data: [],
                    itemStyle: {
                        normal: {
                            color: color,
                            // 柱形图上方标题
                            label: {
                                show: true,
                                lineHeight: 25,
                                position: 'top',
                                textStyle: {
                                    // color: 'rgb(1, 255, 250)',
                                    color: '#fff',
                                    fontSize: 8,
                                },
                            },
                        },
                    },
                },
                // 下
                {
                    z: 2,
                    name: '同步成功',
                    type: 'pictorialBar',
                    // data: data.map(item => item + 90),
                    // data: data,
                    // data: this.data['succeed'],
                    data: [],
                    symbol: 'diamond',
                    symbolOffset: ['-55%', '50%'],
                    symbolSize: [barWidth, 10],
                    itemStyle: {
                        normal: {
                            // color: '#1b9fff',
                            color: color,
                        },
                    },
                    tooltip: {
                        show: false,
                    },
                },

                // 上
                {
                    z: 3,
                    name: '同步成功',
                    type: 'pictorialBar',
                    symbolPosition: 'end',
                    // data: data,
                    // data: this.data['succeed'],
                    data: [],
                    symbol: 'diamond',
                    symbolOffset: ['-55%', '-50%'],
                    symbolSize: [barWidth, 20],
                    // symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
                    itemStyle: {
                        normal: {
                            // borderWidth: 2,
                            color: colorArr[2],
                        },
                    },
                    tooltip: {
                        show: false,
                    },
                },

                // 这个实际不显示，被其他覆盖，用于设置图例颜色
                {
                    z: 0,
                    name: '同步失败',
                    type: 'pictorialBar',
                    symbol: 'diamond',
                    // data: this.data['failed'],
                    data: [],
                    symbolOffset: ['-55%', '50%'],
                    symbolSize: [barWidth, 10],
                    itemStyle: {
                        normal: {
                            color: '#ec6d6d',
                        },
                    },
                    tooltip: {
                        show: false,
                    },
                },
                // 中
                {
                    z: 1,
                    name: '同步失败',
                    type: 'bar',
                    barWidth: barWidth,
                    barGap: '10%',
                    barMinHeight: 1,
                    // data: data2,
                    // data: this.data['failed'],
                    data: [],
                    itemStyle: {
                        normal: {
                            color: color2,
                            // 柱形图上方标题
                            label: {
                                show: true,
                                lineHeight: 25,
                                position: 'top',
                                textStyle: {
                                    // color: 'rgb(2, 157, 246)',
                                    color: '#fff',
                                    fontSize: 8,
                                },
                            },
                        },
                    },
                },
                // 下
                {
                    z: 2,
                    name: '同步失败',
                    type: 'pictorialBar',
                    // data: this.data['failed'],
                    data: [],
                    // data: data2,
                    symbol: 'diamond',
                    symbolOffset: ['55%', '50%'],
                    symbolSize: [barWidth, 10],
                    itemStyle: {
                        normal: {
                            color: color2,
                        },
                    },
                    tooltip: {
                        show: false,
                    },
                },
                // 上
                {
                    z: 3,
                    name: '同步失败',
                    type: 'pictorialBar',
                    symbolPosition: 'end',
                    // data: data2,
                    // data: this.data['failed'],
                    data: [],
                    symbol: 'diamond',
                    symbolOffset: ['55%', '-50%'],
                    symbolSize: [barWidth, 20],
                    // symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
                    itemStyle: {
                        normal: {
                            // borderWidth: 2,
                            color: '#f09895',
                            // color: colorArr2[2],
                        },
                    },
                    tooltip: {
                        show: false,
                    },
                },
            ],
        };

        this.chartInstance.setOption(initOption);
        // 点击事件
        this.chartInstance.on('click', param => {
            console.log(param, 'param');

            const data = param.data;
            const seriesName = param.seriesName;
            const dataIndex = param.dataIndex;
            const totalData = this.data['succeed'][dataIndex] + this.data['failed'][dataIndex];
            const percent = totalData ? ((data / totalData) * 100).toFixed(2) + '%' : '0%';
            const seriesIndex = param.seriesIndex;
            const name = param.name;
            this.handleClickBar(seriesName, data, percent, seriesIndex, dataIndex, name);
        });
    }

    updateChart() {
        const dataOption = {
            xAxis: { data: this.data['tags'] },
            series: [
                { data: [], type: 'pictorialBar' },
                { data: this.data['succeed'], type: 'bar' },
                { data: this.data['succeed'], type: 'pictorialBar' },
                { data: this.data['succeed'], type: 'pictorialBar' },

                { data: [], name: '同步失败', type: 'pictorialBar' },
                { data: this.data['failed'], name: '同步失败', type: 'bar' },
                { data: this.data['failed'], name: '同步失败', type: 'pictorialBar' },
                { data: this.data['failed'], name: '同步失败', type: 'pictorialBar' },
            ],
        };
        // this.chartInstance.clear();
        this.chartInstance.setOption(dataOption);
    }

    // 同步明细数据数量变化回调
    getDetailDataChange(args: any) {
        // 被动刷新图表数据
        this.$emit('getDetailDataChange', args);
    }

    refresh() {
        this.chartInstance.clear();
        this.$emit('refresh', '条目同步参数');
    }

    dispose() {
        this.chartInstance.dispose(); // 销毁实例
        this.initChart();
    }

    beforeDestroy() {
        this.chartInstance.clear();
        this.chartInstance.dispose();
        this.chartInstance = null;
    }
}
</script>

<style scoped>
.com-chart {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
</style>
